var bottomEcharts1 = echarts.init(document.getElementById("bottomEcharts1"));
var bottomEcharts2 = echarts.init(document.getElementById("bottomEcharts2"));
var bottomEcharts3 = echarts.init(document.getElementById("bottomEcharts3"));
var bottomEcharts4 = echarts.init(document.getElementById("bottomEcharts4"));
var bottomEcharts5 = echarts.init(document.getElementById("bottomEcharts5"));
var btm_option1 = {
  title: {
    text: "任务统计",
    top: "5%",
    left: "5%",
    textStyle: {
      color: "black",
      fontSize: 12,
      fontWeight: "bold",
    },
  },
  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "shadow",
    },
  },
  dataZoom: {
    type: "inside",
    start: 0,
    end: 70,
  },
  grid: {
    top: "25%",
    bottom: "20%",
    left: "15%",
    right: "10%",
  },
  xAxis: {
    type: "category",
    axisLabel: {
      color: "black",
      fontSize: 12,
      fontWeight: "bold",
      formatter: function (data) {
        if (data.length <= 3) {
          return data;
        } else if (data.length > 3) {
          return (
            data.substring(0, 3) + "\n" + data.substring(3, data.length - 1)
          );
        }
      },
    },
    axisLine: {
      lineStyle: {
        color: "black",
      },
    },
    axisTick: {
      show: false,
    },
    data: [
      "自然资源和规划局",
      "攻坚作战室",
      "县效能办",
      "县委督查室",
      "驻县委办督查组",
      "驻县政府办督查组",
      "县政府督查室",
      "县政府办",
    ],
  },
  yAxis: {
    type: "value",
    axisLabel: {
      color: "black",
      fontSize: 12,
      fontWeight: "bold",
    },
    axisLine: {
      show: false,
    },
    splitLine: {
      lineStyle: {
        type: "dashed",
        color: "rgba(0,0,0,0.2)",
      },
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      type: "bar",
      barWidth: 16,
      itemStyle: {
        color: "#4DD0E1",
      },
      data: [4, 15, 56, 9, 15, 12, 72, 21],
    },
  ],
};
var btm_option2 = {
  title: {
    text: "问题处理(%)",
    top: "5%",
    left: "5%",
    textStyle: {
      color: "black",
      fontSize: 12,
      fontWeight: "bold",
    },
  },
  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    top: "25%",
    bottom: "15%",
    left: "15%",
    right: "10%",
  },
  xAxis: {
    type: "category",
    axisLabel: {
      color: "black",
      fontSize: 12,
      fontWeight: "bold",
    },
    axisLine: {
      lineStyle: {
        color: "black",
      },
    },
    axisTick: {
      show: false,
    },
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月"],
  },
  yAxis: {
    type: "value",
    min: 90,
    axisLabel: {
      color: "black",
      fontSize: 12,
      fontWeight: "bold",
    },
    axisLine: {
      show: false,
    },
    splitLine: {
      lineStyle: {
        type: "dashed",
        color: "rgba(0,0,0,0.2)",
      },
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      type: "line",
      barWidth: 10,
      itemStyle: {
        color: "#4DD0E1",
      },
      smooth:true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(0,255,255,0.6)" },
          { offset: 1, color: "rgba(0,255,255,0)" },
        ]),
      },
      label:{
        show:true,
        position:"top",
        color:"rgba(0,255,255,1)",
      },
      data: [98.6, 99.7, 98.6, 99.2, 97.9, 98.8, 99.4, 99.3, 99.8],
    },
  ],
};
var btm_option3 = {
  title: {
    text: "总任务数\n211",
    x: "center",
    y: "center",
    textStyle: {
      color: "black",
      fontSize: 12,
      fontWeight: "bold",
    },
  },
  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "shadow",
    },
  },
  series: [
    {
      type: "pie",
      center: ["50%", "50%"],
      radius: ["45%", "70%"],
      label: {
        show: true,
      },
      labelLine: {
        show: true,
      },
      data: [
        {
          name: "会议纪要",
          value: 27,
        },
        {
          name: "书记、县长批示件",
          value: 14,
        },
        {
          name: "文件办理告知单",
          value: 1,
        },
        {
          name: "县委交办事项",
          value: 9,
        },
        {
          name: "其他事项",
          value: 25,
        },
        {
          name: "单位重大事项",
          value: 24,
        },
        {
          name: "办公室内部事务管理",
          value: 111,
        },
      ],
    },
  ],
};
var htmlsize =
  (document.documentElement.clientWidth || document.body.clientWidth) / 1920;
var btm_option4 = {
  title: {
    text: "{a|209/211个}",
    textStyle: {
      fontSize: 28,
      fontFamily: "Microsoft Yahei",
      fontWeight: "normal",
      color: "white",
      rich: {
        a: {
          fontSize: 16,
        },
      },
    },
    x: "center",
    y: "center",
  },
  grid: {},
  series: [
    {
      type: "liquidFill",
      itemStyle: {
        opacity: 0.8, //波浪的透明度
        shadowBlur: 10 * htmlsize, //波浪的阴影范围
        shadowColor: "#FFB931", //阴影颜色
      },
      radius: "99%",
      //水波
      color: [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#41D4FF",
          },
          {
            offset: 1,
            color: "#41D4FF",
          },
        ]),
      ],
      data: [
        {
          value: 0.8,
        },
      ],
      // background: '#000',
      center: ["50%", "50%"],
      backgroundStyle: {
        color: "transparent",
      },
      label: {
        normal: {
          formatter: "",
          textStyle: {
            fontSize: 12,
          },
        },
      },
      outline: {
        itemStyle: {
          borderColor: "transparent",
          borderWidth: 5 * htmlsize,
        },
        borderDistance: 0,
      },
    },
    //外环线
    {
      color: ["#41D4FF", "transparent"],
      type: "pie",
      center: ["50%", "50%"],
      radius: ["99%", "100.5%"],
      hoverAnimation: false,
      data: [
        {
          name: "",
          value: 300,
          label: {
            show: false,
            position: "center",
            color: "#fff",
            fontSize: 38,
            fontWeight: "bold",
            // formatter: function (o) {
            //   return data;
            // },
          },
        },
      ],
    },
  ],
};
var btm_option5 = {
  color: ["#9CCC65", "#FFCA28", "#FF8A65"],
  title: {
    text: "评价总数\n211",
    x: "center",
    y: "center",
    textStyle: {
      color: "white",
      fontSize: 12,
      fontWeight: "bold",
    },
  },
  legend: {
    icon: "rect",
    top: "10%",
    right: "10%",
    orient: "vertical",
    itemWidth: 10,
    itemHeight: 5,
    data: ["好", "中", "差"],
  },
  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "shadow",
    },
  },
  series: [
    {
      type: "pie",
      //   roseType: 'radius',
      center: ["50%", "50%"],
      radius: ["0%", "60%"],
      label: {
        show: true,
        formatter: "{b}:{d}%",
      },
      labelLine: {
        show: true,
      },
      data: [
        {
          name: "好",
          value: 164,
        },
        {
          name: "中",
          value: 33,
        },
        {
          name: "差",
          value: 14,
        },
      ],
    },
  ],
};
bottomEcharts1.setOption(btm_option1);
bottomEcharts2.setOption(btm_option2);
bottomEcharts3.setOption(btm_option3);
bottomEcharts4.setOption(btm_option4);
bottomEcharts5.setOption(btm_option5);

window.addEventListener("resize", function () {
  bottomEcharts1.resize();
  bottomEcharts2.resize();
  bottomEcharts3.resize();
  bottomEcharts4.resize();
  bottomEcharts5.resize();
});
